<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 定义模板 -->
    <div id="app">
      <div>今天天气很{{info}}</div>
      <button @click="isHot = !isHot">按钮</button>
      <hr />
      <div>{{obj}}</div>
      <button @click="obj={xxx:1}">修改name</button>
    </div>

    <!-- 引入vue.js -->
    <script src="./vue.js"></script>

    <!-- 创建vue实例,绑定模板 -->
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          isHot: true,
          info: '',
          obj: {
            name: 'zs',
          },
        },
        // 监听属性,监听已有的数据
        watch: {
          //   isHot: {
          //     immediate: true, //加上这个配置项则handler函数在初始化的也会调用一次
          //     handler(newValue) {
          //       // newValue指isHot变化后的新值
          //       console.log('isHot变化了', newValue)
          //       this.info = newValue ? '炎热' : '凉爽'
          //     },
          //   },
          //   obj: {
          //     immediate: true,
          //     deep: true, //深度监听,如果是复杂数据类型里面的数据发生变化,也可以监听到
          //     handler(newValue) {
          //       console.log('obj变化了', newValue)
          //     },
          //   },
          // 简写: 就是只写了handler
          //   obj(newValue) {
          //     console.log('obj被修改了', newValue)
          //   },
        },
      })
      // 监听属性的第二种写法:
      // 1. 完整版
      //   vm.$watch('obj', {
      //     immediate: true,
      //     deep: true,
      //     handler(newValue) {
      //       console.log('obj被修改了', newValue)
      //     },
      //   })
      // 2. 简写
      //   vm.$watch('obj', function (newValue) {
      //     console.log('obj被修改了', newValue)
      //   })
    </script>
  </body>
</html>
